<template>
    <h1>Child子组件</h1>
    <h3>age: {{age}}</h3>
    <h3>length:{{length}}</h3>
</template>

<script lang="js">


import {defineComponent, computed, Ref, toRef} from "vue";

function useGetLength(age)  {
    return computed(() => {
        return age.value.toString().length
    })
}

export default defineComponent({
    name: "Child",
    props: {
        age: {
            type: Number,
            required: true
        }
    },
    setup(props) {
        // 转换成Ref
        let length = useGetLength(toRef(props, "age"))
        return {
            length
        }
    }
})

</script>

<style scoped>

</style>